<!DOCTYPE html>
<html lang="en">

<head>
    <title>视频监控</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/videoPage.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">视频监控</div>
        </div>
        <div class="app_main">
            <div class="app_mainTitle">摄像机</div>
            <div class="app_mainItem" @click="goVideoDetail(item.src)" v-for="(item,index) in videoList">
                <video :src="item.src"></video>
                <div class="tips">{{item.name}}</div>
            </div>
        </div>
        <!-- 视频弹窗 -->
        <nut-popup v-model="videoShow" position="right" :style="{ height: '100vh',width: '100vw' }">
            <video id="video" :src="videoSrc" controls="true" preload="auto" webkit-playsinline="true"
                playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" style="object-fit: fill"
                controlslist="nodownload noremoteplayback" disablePictureInPicture="true" playsinline
                webkit-playsinline></video>
            <div class="popupIcon" @click="videoShow = false">
                <nut-icon type="cross" size="20px" color="#ff0000"></nut-icon>
            </div>
        </nut-popup>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                videoShow: false,
                videoList: [
                    { name: '1号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '2号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '3号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '4号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '5号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '6号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '7号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '8号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '9号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                    { name: '10号机', src: 'http://haier-dev.oss-cn-beijing.aliyuncs.com/upload/daily/211026/1635231357.mp4' },
                ],
                videoSrc: ''
            },
            mounted() { },
            methods: {
                back() {
                    window.history.go(-1)
                },
                goVideoDetail(url) {
                    this.videoSrc = url
                    this.videoShow = true
                }
            }
        })
    </script>
</body>

</html>